<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
    <style>
        body {
            height: 100%;
            background-color: #39393b;
        }
    </style>
</head>
<body>
<!--
*************************************************************************
   Generated by HCODE at 2017-07-04 16:29:59
   From: https://code.hcharts.cn/demos/hhhhDk?hc-theme=dark-unica
*************************************************************************
 -->
<div style="margin-top: 15%">
    <div id="container" style="min-width:400px;height:400px"></div>
</div>
<script>
    $(function () {
        setInterval(function () {
            //定时器要执行的代码
            func();
            $('.highcharts-credits').hide()
        }, 30000);
        function func() {
            var data;
            $.ajax({
                url: "", context: document.body, async: false, success: function (getdata) {
                    data = getdata;
                }
            });
            {#            console.log(data)#}
            $('#container').highcharts({
                    title: {
                        text: '混合图表'
                    },
                    xAxis: {
                        {#                    categories: ['苹果', ' 橙', '梨', '香蕉', '李子']#}
                        categories: data['categories']
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    labels: {
                        items: [{
                            html: '水果消耗',
                            style: {
                                left: '100px',
                                top: '18px',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                            }
                        }]
                    },

                    series: [
                        {
                            type: 'column',
                            name: '小张',
                            data: data['column'][0]
                        }, {
                            type: 'column',
                            name: '小潘',
                            data: data['column'][1]
                        }, {
                            type: 'column',
                            name: '小王',
                            data: data['column'][2]
                        }
                        ,

                        {
                            type: 'spline',
                            name: '平均值',
                            data: data['spline'],
                            marker: {
                                lineWidth: 2,
                                lineColor: Highcharts.getOptions().colors[3],
                                fillColor: 'white'
                            }
                        }, {
                            type: 'pie',
                            name: '总的消耗',
                            data: [{
                                name: '小张',
                                y: 13,
                                color: Highcharts.getOptions().colors[0] // Jane's color
                            }, {
                                name: '小潘',
                                y: 23,
                                color: Highcharts.getOptions().colors[1] // John's color
                            }, {
                                name: '小王',
                                y: 19,
                                color: Highcharts.getOptions().colors[2] // Joe's color
                            }],
                            center: [100, 80],
                            size: 100,
                            showInLegend: false,
                            dataLabels: {
                                enabled: false
                            }
                        }
                    ]
                }
            );
        }

        func();
        $('.highcharts-credits').hide()

    })

</script>
</body>
</html>

{#<text x="886" class="highcharts-credits" text-anchor="end" style="cursor:pointer;color:#666;font-size:9px;fill:#666;" y="395">Highcharts.com.cn</text>#}